<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body{
		padding: 0;
		margin: 0;
	}
    .icon-0 {
        width: 0.9em;
        height: 1em;
        fill: currentColor;
        stroke: initial;
    }

    .icon-1 {
        width: 0.51em;
        height: 1em;
        fill: currentColor;
        stroke: initial;
    }

    .icon-2 {
        width: 0.81em;
        height: 1em;
        fill: currentColor;
        stroke: initial;
    }

    .icon-behance {
        width: 1.57em;
        height: 1em;
        fill: currentColor;
        stroke: initial;
    }

    .icon-brutalism {
        width: 7.85em;
        height: 1em;
        fill: currentColor;
        stroke: initial;
    }

    .icon-codepen {
        width: 1em;
        height: 1em;
        fill: #fff;
        stroke: initial;
    }

    .icon-dribbble {
        width: 1em;
        height: 1em;
        fill: currentColor;
        stroke: initial;
    }

    .icon-facebook {
        width: 0.56em;
        height: 1em;
        fill: currentColor;
        stroke: initial;
    }

    .icon-instagram {
        width: 1em;
        height: 1em;
        fill: currentColor;
        stroke: initial;
    }

    .icon-op-pr {
        width: 1.31em;
        height: 1em;
        fill: currentColor;
        stroke: initial;
    }

    .icon-soulless {
        width: 7.08em;
        height: 1em;
        fill: currentColor;
        stroke: initial;
    }

    .icon-tumblr {
        width: 0.56em;
        height: 1em;
        fill: currentColor;
        stroke: initial;
    }

    .icon-twitter {
        width: 1.14em;
        height: 1em;
        fill: currentColor;
        stroke: initial;
    }

    /* COMPONENTS */

    /* PAGES */

    body {
        background-color: #ededed;
    }

    body,
    .content,
    .slides,
    .slide {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        cursor: none !important;
    }

    .preload {
        display: inline-block;
        position: absolute;
        width: 142px;
        height: 70px;
        top: calc(50% - 20px);
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        font-size: 0;
        z-index: 10;
        pointer-events: none;
    }

    .preload__pillar {
        position: absolute;
        display: inline-block;
        width: 26px;
        height: 0;
        bottom: 0;
        background: #fff;
        overflow: hidden;
        z-index: 5;
    }

    .preload__pillar:nth-child(3) {
        width: 44px;
    }

    .preload__pillar:nth-child(1) {
        left: 0%;
    }

    .preload__pillar:nth-child(2) {
        left: 26px;
    }

    .preload__pillar:nth-child(3) {
        left: 52px;
    }

    .preload__pillar:nth-child(4) {
        left: 96px;
    }

    .preload__pillar:nth-child(5) {
        left: 122px;
    }

    .preload__pillar .preload__counter {
        z-index: 10;
        top: inherit;
        bottom: 22px;
    }

    .preload__counter {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        font-size: 12px;
        font-family: "montserrat-b", sans-serif;
        font-weight: bold;
        z-index: 0;
    }

    .slide {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        font-size: 0;
        z-index: 0;
        opacity: 0;
        background-size: 0;
    }

    .slide.active-slide {
        z-index: 10 !important;
        opacity: 1;
    }

    .slide.next {
        z-index: 5 !important;
        opacity: 1;
    }

    .slide.next .slide__slice {
        -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
        transform: translateY(100%);
    }

    .slide.next .slide__num span {
        -webkit-transform: translateY(102%);
        -ms-transform: translateY(102%);
        transform: translateY(102%);
    }

    .slide.top .slide__slice,
    .slide.prev-555 .slide__slice {
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    .slide.top .slide__num span,
    .slide.prev-555 .slide__num span {
        -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    .slide.orig-scale .slide__slice-img {
        -webkit-transform: scale(1) !important;
        -ms-transform: scale(1) !important;
        transform: scale(1) !important;
    }

    .slide.light-slide .slide__num,
    .slide.light-slide .slide__num svg {
        color: #121212;
        fill: #121212;
    }

    .slide.dark-slide .slide__num,
    .slide.dark-slide .slide__num svg {
        color: #fff;
        fill: #fff;
    }

    .slide__slice {
        position: absolute;
        top: 0;
        display: inline-block;
        height: 100%;
        background: #000;
        width: calc(18.5vw + 1.2px);
        background-image: inherit;
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        overflow: hidden;
        box-sizing: border-box;
        cursor: pointer;
        -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
        transform: translateY(0%);
    }

    .slide__slice:nth-child(3) {
        width: calc(26vw + 1.2px);
    }

    .slide__slice:nth-child(1) {
        left: 0%;
    }

    .slide__slice:nth-child(1) .slide__slice-img {
        -webkit-transform: scale(1.2) translateY(-10px);
        -ms-transform: scale(1.2) translateY(-10px);
        transform: scale(1.2) translateY(-10px);
    }

    .slide__slice:nth-child(2) {
        left: 18.5vw;
    }

    .slide__slice:nth-child(2) .slide__slice-img {
        -webkit-transform: scale(1.16) translateY(20px);
        -ms-transform: scale(1.16) translateY(20px);
        transform: scale(1.16) translateY(20px);
    }

    .slide__slice:nth-child(3) {
        left: 37vw;
    }

    .slide__slice:nth-child(3) .slide__slice-img {
        -webkit-transform: scale(1.08) translateY(-20px);
        -ms-transform: scale(1.08) translateY(-20px);
        transform: scale(1.08) translateY(-20px);
    }

    .slide__slice:nth-child(4) {
        left: 63vw;
    }

    .slide__slice:nth-child(4) .slide__slice-img {
        -webkit-transform: scale(1.16) translateY(20px);
        -ms-transform: scale(1.16) translateY(20px);
        transform: scale(1.16) translateY(20px);
    }

    .slide__slice:nth-child(5) {
        left: 81.5vw;
    }

    .slide__slice:nth-child(5) .slide__slice-img {
        -webkit-transform: scale(1.2) translateY(-10px);
        -ms-transform: scale(1.2) translateY(-10px);
        transform: scale(1.2) translateY(-10px);
    }

    .slide__slice-img {
        display: inline-block;
        height: 100%;
        width: 100%;
        background-image: inherit;
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        transition: -webkit-transform .6s ease-in-out;
        transition: transform .6s ease-in-out;
        transition: transform .6s ease-in-out, -webkit-transform .6s ease-in-out;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .slide__num {
        pointer-events: none;
        position: absolute;
        height: 9vw;
        overflow: hidden;
        top: 10vh;
        right: 11vh;
        z-index: 10;
        color: #121212;
        font-size: 8vw;
        font-family: "montserrat-bk", sans-serif;
    }

    .slide:first-child .slide__num {
        display: none;
    }

    .slide__num span {
        display: inline-block;
        vertical-align: top;
        -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
        transform: translateY(0%);
        height: 100%;
    }

    /* .slide__num span:nth-child(2) {
  margin-left: -2.0vw;
} */

    .dd {
        pointer-events: none;
        position: absolute;
        bottom: 100px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        font-size: 0;
        text-align: center;
        z-index: 10;
    }

    .dd.light-mode .dd__dot,
    .dd.light-mode .dd__circle {
        background: #fff;
        transition: background 0.5s ease !important;
    }

    .dd.light-mode .dd__text {
        color: #fff;
    }

    .dd.dark-mode .dd__dot,
    .dd.dark-mode .dd__circle {
        background: #121212;
        transition: background 0.5s ease !important;
    }

    .dd.dark-mode .dd__text {
        color: #121212;
    }

    .dd__hint {
        display: -webkit-inline-flex;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        text-align: center;
        width: 40px;
        height: 76px;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .dd__hint.active .dd__dot {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    .dd__hint.active .dd__circle {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }

    .dd__hint.anim .dd__circle {
        transition: none;
    }

    .dd__dots {
        position: relative;
        display: inline-block;
        width: 1px;
        height: 54px;
        overflow: hidden;
    }

    .dd__dot {
        display: inline-block;
        width: 1px;
        height: 2px;
        background: #fff;
        opacity: 0;
        transition: background 0.5s, -webkit-transform 0.3s;
        transition: transform 0.3s, background 0.5s;
        transition: transform 0.3s, background 0.5s, -webkit-transform 0.3s;
        margin-top: 6px;
    }

    .dd__dot:nth-child(6) {
        -webkit-transform: translateY(18px);
        -ms-transform: translateY(18px);
        transform: translateY(18px);
        transition: -webkit-transform 0.4s ease-out;
        transition: transform 0.4s ease-out;
        transition: transform 0.4s ease-out, -webkit-transform 0.4s ease-out;
        transition-delay: .25s;
    }

    .dd__dot:nth-child(5) {
        -webkit-transform: translateY(26px);
        -ms-transform: translateY(26px);
        transform: translateY(26px);
        transition: -webkit-transform 0.5s ease-out;
        transition: transform 0.5s ease-out;
        transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out;
        transition-delay: .25s;
    }

    .dd__dot:nth-child(4) {
        -webkit-transform: translateY(34px);
        -ms-transform: translateY(34px);
        transform: translateY(34px);
        transition: -webkit-transform 0.6s ease-out;
        transition: transform 0.6s ease-out;
        transition: transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
        transition-delay: .25s;
    }

    .dd__dot:nth-child(3) {
        -webkit-transform: translateY(42px);
        -ms-transform: translateY(42px);
        transform: translateY(42px);
        transition: -webkit-transform 0.7s ease-out;
        transition: transform 0.7s ease-out;
        transition: transform 0.7s ease-out, -webkit-transform 0.7s ease-out;
        transition-delay: .25s;
    }

    .dd__dot:nth-child(2) {
        -webkit-transform: translateY(50px);
        -ms-transform: translateY(50px);
        transform: translateY(50px);
        transition: -webkit-transform 0.8s ease-out;
        transition: transform 0.8s ease-out;
        transition: transform 0.8s ease-out, -webkit-transform 0.8s ease-out;
        transition-delay: .25s;
    }

    .dd__dot:nth-child(1) {
        -webkit-transform: translateY(58px);
        -ms-transform: translateY(58px);
        transform: translateY(58px);
        transition: -webkit-transform 0.9s ease-out;
        transition: transform 0.9s ease-out;
        transition: transform 0.9s ease-out, -webkit-transform 0.9s ease-out;
        transition-delay: .25s;
    }

    .dd__dot+.dd__dot {
        margin-top: 6px;
    }

    .dd__circle {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #fff;
        opacity: 0;
        -webkit-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        transition: opacity .3s ease, -webkit-transform .36s ease-out;
        transition: transform .36s ease-out, opacity .3s ease;
        transition: transform .36s ease-out, opacity .3s ease, -webkit-transform .36s ease-out;
    }

    .dd__text {
        margin-top: 18px;
        font-size: 12px;
        color: #fff;
        font-family: "montserrat-b", sans-serif;
        text-align: center;
        display: block;
        overflow: hidden;
        line-height: 1;
        text-transform: uppercase;
        white-space: pre;
        opacity: 0;
        transition: color 0.5s;
    }

    .dd__text span {
        display: inline-block;
    }

    .dd__text span:nth-child(5) {
        width: 4px;
    }

    .dd__text span:nth-child(6),
    .dd__text span:nth-child(7) {
        width: 10px;
    }

    .dd__text span.hide {
        transition: width .6s, opacity .6s;
        width: 0;
        opacity: 0 !important;
    }

    .taglines {
        position: fixed;
        height: 8vw;
        width: 100%;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        overflow: hidden;
        z-index: 10;
        text-align: center;
        pointer-events: none;
    }

    .tagline {
        display: inline-block;
        height: 100%;
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        font-size: 8vw;
        font-family: "montserrat-bk", sans-serif;
        text-transform: uppercase;
        color: transparent;
        z-index: 0;
        opacity: 0;
        margin-left: -2px;
    }

    .tagline svg {
        fill-opacity: 0;
    }

    .tagline.light-mode .tagline__text,
    .tagline.light-mode .tagline__text svg {
        color: #fff;
        fill: #fff;
    }

    .tagline.dark-mode .tagline__text,
    .tagline.dark-mode .tagline__text svg {
        color: #121212;
        fill: #121212;
    }

    .tagline.active-slide {
        z-index: 10 !important;
        opacity: 1;
    }

    .tagline.next {
        z-index: 5 !important;
        opacity: 1;
    }

    .tagline.next .tagline__slice {
        -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
        transform: translateY(100%);
    }

    .tagline__slice {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        width: calc(14.2% + 2px);
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        height: 100%;
        overflow: hidden;
    }

    .tagline__slice:nth-of-type(1) {
        left: calc(0% + 2px);
    }

    .tagline__slice:nth-of-type(1) .tagline__text {
        left: -0%;
    }

    .tagline__slice:nth-of-type(2) {
        left: calc(14.2% + 4px);
    }

    .tagline__slice:nth-of-type(2) .tagline__text {
        left: -100%;
    }

    .tagline__slice:nth-of-type(3) {
        left: calc(28.4% + 6px);
    }

    .tagline__slice:nth-of-type(3) .tagline__text {
        left: -200%;
    }

    .tagline__slice:nth-of-type(4) {
        left: calc(42.6% + 8px);
    }

    .tagline__slice:nth-of-type(4) .tagline__text {
        left: -300%;
    }

    .tagline__slice:nth-of-type(5) {
        left: calc(56.8% + 10px);
    }

    .tagline__slice:nth-of-type(5) .tagline__text {
        left: -400%;
    }

    .tagline__slice:nth-of-type(6) {
        left: calc(71% + 12px);
    }

    .tagline__slice:nth-of-type(6) .tagline__text {
        left: -500%;
    }

    .tagline__slice:nth-of-type(7) {
        left: calc(85.2% + 14px);
    }

    .tagline__slice:nth-of-type(7) .tagline__text {
        left: -600%;
    }

    .tagline__text,
    .tagline__text svg {
        display: inline-block;
        height: 100%;
        position: absolute;
        top: 0;
        color: #121212;
        fill: #121212;
        fill-opacity: 1;
    }

    .info__text,
    .i-card__title,
    .i-card__name {
        font-size: 12px;
        font-family: "montserrat-sb", sans-serif;
        text-transform: uppercase;
    }

    .info {
        display: none;
        width: 100vw;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 10;
        pointer-events: none;
    }

    .info.open-info {
        display: inline-block;
    }

    .info__aside {
        pointer-events: all;
        color: #fff;
        font-size: 0;
        position: absolute;
    }

    .info__aside.active {
        z-index: 10;
    }

    .info__aside.light-mode .info__slot {
        background: #fff;
    }

    .info__aside.light-mode .info__text {
        color: #121212;
    }

    .info__aside.light-mode .info__show-btn:before,
    .info__aside.light-mode .info__show-btn:after {
        background: #121212;
    }

    .info__aside.btn-open .info__slot {
        background: #fff;
        transition: background .6s .4s;
    }

    .info__aside.btn-open .info__text {
        color: #121212;
        transition: color .6s .4s;
    }

    .info__aside.btn-open .info__show-btn:before,
    .info__aside.btn-open .info__show-btn:after {
        background: #121212;
    }

    .info__aside.btn-open .info__show-btn:before {
        -webkit-transform: translateX(4px);
        -ms-transform: translateX(4px);
        transform: translateX(4px);
    }

    .info__aside.btn-open .info__show-btn:after {
        -webkit-transform: translateX(-4px);
        -ms-transform: translateX(-4px);
        transform: translateX(-4px);
    }

    .info__aside_lt {
        -webkit-transform-origin: left top;
        -ms-transform-origin: left top;
        transform-origin: left top;
        -webkit-transform: translate(130px, 0%) rotate(90deg);
        -ms-transform: translate(130px, 0%) rotate(90deg);
        transform: translate(130px, 0%) rotate(90deg);
        width: 214px;
        height: 130px;
        top: 0;
        left: 0;
    }

    .info__aside_rb {
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;
        -webkit-transform: translate(0, -170px) rotate(-90deg);
        -ms-transform: translate(0, -170px) rotate(-90deg);
        transform: translate(0, -170px) rotate(-90deg);
        width: 170px;
        height: 130px;
        right: 0;
        bottom: 0;
        z-index: 5;
        cursor: pointer;
    }

    .info__slot {
        padding-left: 30px;
        display: -webkit-inline-flex;
        display: -ms-inline-flexbox;
        display: inline-flex;
        background: #121212;
        transition: background .6s .6s;
        -webkit-transform: translate(-100%, 0);
        -ms-transform: translate(-100%, 0);
        transform: translate(-100%, 0);
    }

    .info__slot div {
        margin: auto 0;
    }

    .info__slot_bgg {
        height: 80px;
        width: 100%;
    }

    .info__slot_sml {
        height: 51px;
        width: 80px;
        margin-bottom: -1px;
    }

    .info__slot_sml div {
        margin: auto 0 0;
    }

    .info__text {
        transition: color .6s .6s;
    }

    .info__show-btn {
        position: relative;
        display: inline-block;
        margin-left: 6px;
        height: 100%;
        width: 10px;
    }

    .info__show-btn:before,
    .info__show-btn:after {
        content: '';
        position: absolute;
        width: 2px;
        height: 10px;
        background: #fff;
        bottom: 0;
        transition: background .6s .6s, -webkit-transform .6s;
        transition: transform .6s, background .6s .6s;
        transition: transform .6s, background .6s .6s, -webkit-transform .6s;
    }

    .info__show-btn:before {
        left: 0;
    }

    .info__show-btn:after {
        right: 0;
        height: 14px;
    }

    .popup {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .popup.open {
        pointer-events: all;
    }

    .popup__slice {
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%);
        margin-left: auto;
        background: #121212;
        height: 20%;
    }

    .popup__slice:nth-child(1) {
        width: 73%;
    }

    .popup__slice:nth-child(2) {
        width: 58%;
    }

    .popup__slice:nth-child(3) {
        width: 50%;
    }

    .popup__slice:nth-child(4) {
        width: 35%;
    }

    .popup__slice:nth-child(5) {
        width: 43%;
    }

    .info-cards {
        position: absolute;
        top: 0;
        right: 80px;
    }

    .i-card {
        margin-top: 80px;
        color: #fff;
        text-align: right;
    }

    .i-card__title,
    .i-card__name {
        display: block;
        overflow: hidden;
        line-height: 1;
        text-transform: uppercase;
        white-space: pre;
    }

    .i-card__title span,
    .i-card__name span {
        will-change: transform;
        display: inline-block;
    }

    .i-card__title {
        font-size: 10px;
    }

    .i-card__name {
        margin-top: 12px;
    }

    .i-card__links-w {
        display: block;
        margin-top: 30px;
        overflow: hidden;
    }

    .i-card__link {
        display: inline-block;
        text-decoration: none;
        color: #fff;
        margin-left: 12px;
    }

    .i-card__link:first-child {
        margin-left: 0;
    }

    .i-card__link svg {
        width: 21px;
        min-height: 16px;
    }

    .c-black {
        color: #121212;
    }

    .c-white {
        color: #fff;
    }

    .fade-out {
        opacity: 0;
        transition: opacity .2s;
    }

    .controls {
        position: absolute;
        bottom: 80px;
        left: 80px;
        width: 160px;
        height: 80px;
        font-size: 0;
        pointer-events: all;
    }

    .controls__item-w {
        display: inline-block;
        position: relative;
        width: 80px;
        height: 80px;
        overflow: hidden;
    }

    .controls__item-w:first-child {
        top: -40px;
    }

    .controls__item {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        width: 80px;
        height: 80px;
        background: #121212;
        transition: background .5s .1s;
    }

    .controls__item.active {
        z-index: 10;
    }

    .controls__item:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%) rotate(-135deg);
        -ms-transform: translate(-50%, -50%) rotate(-135deg);
        transform: translate(-50%, -50%) rotate(-135deg);
        width: 10px;
        height: 10px;
        border-right: 2px solid;
        border-bottom: 2px solid;
        border-color: #fff;
        transition: border .5s .1s;
    }

    .controls__item_up {
        -webkit-transform: translate(0, 100%);
        -ms-transform: translate(0, 100%);
        transform: translate(0, 100%);
    }

    .controls__item_dn {
        -webkit-transform: translate(0, -100%);
        -ms-transform: translate(0, -100%);
        transform: translate(0, -100%);
    }

    .controls__item_dn:after {
        -webkit-transform: translate(-50%, -50%) rotate(45deg);
        -ms-transform: translate(-50%, -50%) rotate(45deg);
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .controls__item.ctrl-b {
        background: #121212;
    }

    .controls__item.ctrl-b:after {
        border-color: #fff;
    }

    .controls__item.ctrl-w {
        background: #fff;
    }

    .controls__item.ctrl-w:after {
        border-color: #121212;
    }

    .m-cursor-w {
        position: fixed;
        top: -10px;
        left: -10px;
        display: inline-block;
        width: 20px;
        height: 20px;
        z-index: 10;
        pointer-events: none;
        -webkit-transform: translate(100px, 100px);
        -ms-transform: translate(100px, 100px);
        transform: translate(100px, 100px);
        transition: opacity .5s;
    }

    .m-cursor-w.hide {
        opacity: 0;
    }

    .m-cursor {
        position: absolute;
        display: inline-block;
        width: 20px;
        height: 20px;
        pointer-events: none;
    }

    .m-cursor:before,
    .m-cursor:after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 3px;
        height: 3px;
        -webkit-transform: translate(-50%, -50%) rotate(45deg);
        -ms-transform: translate(-50%, -50%) rotate(45deg);
        transform: translate(-50%, -50%) rotate(45deg);
        background: inherit;
        transition: width .4s, background .5s .1s, -webkit-transform 0s .2s;
        transition: width .4s, background .5s .1s, transform 0s .2s;
        transition: width .4s, background .5s .1s, transform 0s .2s, -webkit-transform 0s .2s;
        z-index: 0;
    }

    .m-cursor.close .m-cursor__dot,
    .m-cursor.active .m-cursor__dot {
        -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
        transform: scale(0.5);
    }

    .m-cursor.close:before,
    .m-cursor.close:after {
        width: 31px;
        transition: width .4s .1s, background .5s .1s, -webkit-transform .6s .5s;
        transition: width .4s .1s, transform .6s .5s, background .5s .1s;
        transition: width .4s .1s, transform .6s .5s, background .5s .1s, -webkit-transform .6s .5s;
    }

    .m-cursor.close:before {
        -webkit-transform: translate(-50%, -50%) rotate(135deg);
        -ms-transform: translate(-50%, -50%) rotate(135deg);
        transform: translate(-50%, -50%) rotate(135deg);
    }

    .m-cursor.close:after {
        -webkit-transform: translate(-50%, -50%) rotate(225deg);
        -ms-transform: translate(-50%, -50%) rotate(225deg);
        transform: translate(-50%, -50%) rotate(225deg);
    }

    .m-cursor.dark-mode .m-cursor__dot,
    .m-cursor.dark-mode:before,
    .m-cursor.dark-mode:after {
        background: #121212;
    }

    .m-cursor.light-mode .m-cursor__dot,
    .m-cursor.light-mode:before,
    .m-cursor.light-mode:after {
        background: #fff;
    }

    .m-cursor__dot {
        position: absolute;
        display: block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #fff;
        z-index: 1;
        transition: background .5s .1s, -webkit-transform .5s;
        transition: background .5s .1s, transform .5s;
        transition: background .5s .1s, transform .5s, -webkit-transform .5s;
    }

    .m-cursor-line {
        position: fixed;
        left: -1px;
        top: -1px;
        width: 2px;
        height: 0;
        background: #fff;
        z-index: 10;
        pointer-events: none;
    }

    .m-cursor-line.dark-mode {
        background: #121212;
    }

    .m-cursor-line.light-mode {
        background: #fff;
    }

    * {
        cursor: none !important;
    }

    .bg-slide-2 {
        background-image: url("https://www.jq22.com/tp/8a3e932f-2ff4-4756-ace4-31b8729c43a7.png");
    }

    .bg-slide-1 {
        background-image: url('https://www.jq22.com/tp/20fa541d-68ab-4a5d-a926-8085d49ca263.png');
    }
</style>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
    <div class="svg-container" style="position: absolute; width: 0; height: 0; overflow: hidden;">
        <svg xmlns="https://www.w3.org/2000/svg">
            <symbol id="icon-0" viewbox="0 0 90 100.1">
                <path d="M78.4 13C86.1 21.6 90 34 90 50c0 16.1-3.9 28.4-11.6 37.1-7.7 8.7-18.9 13-33.3 13-14.6 0-25.7-4.3-33.5-13C3.9 78.5 0 66.1 0 50s3.9-28.5 11.6-37.1C19.4 4.3 30.5 0 45.1 0c14.4 0 25.6 4.3 33.3 13zM38.1 26c-1.7 1.7-2.9 4.4-3.6 8.2-.7 3.8-1.1 9-1.1 15.8 0 6.7.4 12 1.1 15.8.7 3.8 2 6.6 3.6 8.3 1.7 1.7 4 2.5 7 2.5 2.9 0 5.2-.8 6.9-2.5s2.9-4.4 3.6-8.3c.7-3.8 1.1-9.1 1.1-15.8 0-6.7-.4-12-1.1-15.8-.7-3.8-1.9-6.5-3.6-8.2-1.6-1.7-3.9-2.5-6.9-2.5-3 0-5.3.9-7 2.5z"></path>
            </symbol>
            <symbol id="icon-1" viewbox="0 0 49.6 98.1">
                <path d="M0 0h49.6v98.1H17.1V25.6H0V0z"></path>
            </symbol>
            <symbol id="icon-2" viewbox="0 0 80.9 99.5">
                <path d="M80.9 74.6v24.9h-77l-.1-20.4 34.3-35.4c2.1-2.2 3.9-4.5 5.3-6.7s2.1-4.2 2.1-5.7c0-1.7-.6-3-1.8-3.9-1.2-.9-2.8-1.3-5-1.3-3.6 0-7.8 1.1-12.5 3.4-4.7 2.2-9.4 5.3-14.3 9.2L0 15.3C14.9 5.1 29.5 0 43.8 0 50.5 0 56.6 1.1 62 3.4c5.4 2.2 9.7 5.4 12.8 9.4 3.1 4 4.7 8.6 4.7 13.7 0 5.3-1.7 10.7-5 16-3.4 5.4-8.1 11.1-14.3 17.1l-15.1 15h35.8z"></path>
            </symbol>
            <symbol id="icon-behance" viewbox="0 0 22 14">
                <path d="M6.2.3c.6 0 1.2.1 1.7.2s1 .3 1.3.5c.4.3.7.6.9 1 .2.4.3.9.3 1.5 0 .7-.1 1.2-.5 1.7-.2.5-.7.8-1.3 1.1.8.2 1.4.6 1.8 1.2.4.6.6 1.3.6 2.1 0 .7-.1 1.2-.4 1.7-.3.5-.6.9-1 1.2-.4.3-.9.5-1.5.7-.6.1-1.1.2-1.7.2H0V.3h6.2zm-.4 5.3c.5 0 .9-.1 1.3-.4.4-.2.5-.6.5-1.2 0-.3-.1-.6-.2-.8-.1-.1-.2-.3-.4-.4-.2-.1-.4-.2-.6-.2-.2 0-.5-.1-.7-.1H2.9v3.1h2.9zm.2 5.6c.3 0 .6 0 .8-.1.3-.1.5-.1.7-.3.2-.1.4-.3.5-.5.1-.2.2-.5.2-.9-.1-.6-.2-1.1-.6-1.4-.4-.3-.9-.4-1.5-.4H2.9v3.6H6z"></path>
                <path d="M15.7 11.2c.4.4 1 .6 1.7.6.5 0 1-.1 1.4-.4.4-.3.6-.6.7-.8h2.3c-.4 1.1-.9 2-1.7 2.5-.8.5-1.7.7-2.8.7-.8 0-1.4-.1-2-.4-.6-.2-1.1-.6-1.5-1-.4-.4-.7-1-1-1.6-.2-.6-.3-1.3-.3-2s.1-1.4.4-2c.2-.6.6-1.2 1-1.6.4-.5.9-.8 1.5-1.1.6-.3 1.3-.4 2-.4.8 0 1.5.2 2.1.5.6.3 1.1.7 1.5 1.3.4.5.7 1.1.8 1.8.2.6.2 1.3.2 2h-6.9c0 .8.2 1.5.6 1.9zm3.1-5c-.3-.3-.8-.5-1.5-.5-.4 0-.8.1-1 .2-.3.1-.6.3-.7.5-.2.2-.3.4-.4.7-.1.2-.1.4-.1.6h4.3c-.1-.7-.3-1.2-.6-1.5z"></path>
                <path d="M14.6 1h5.3v1.3h-5.3z"></path>
            </symbol>
            <symbol id="icon-brutalism" viewbox="0 0 807.7 102.9">
                <path d="M70.3 5.6c5.9 2.1 10.4 4.9 13.6 8.7 3.2 3.7 4.8 8.1 4.8 13s-1.5 9.2-4.5 13c-3 3.8-7 6.5-12 8 5.9 1.3 10.6 4.2 14.1 8.8 3.5 4.5 5.3 9.9 5.3 16 0 5.5-1.6 10.4-4.9 14.6-3.3 4.2-7.9 7.4-13.8 9.7-5.9 2.2-12.9 3.4-20.8 3.4H0V2.5h49.7c7.8 0 14.7 1 20.6 3.1zm-17 32.8c1.4-1.3 2-3 2-5.2 0-2.1-.7-3.7-2-5-1.4-1.3-3.1-1.9-5.4-1.9H32.3v14h15.5c2.3 0 4.1-.6 5.5-1.9zm1.8 36.3c1.8-1.4 2.7-3.3 2.7-5.7 0-2.1-.9-3.9-2.7-5.2-1.8-1.3-4.2-2-7.2-2H32.3v15h15.5c3.1.1 5.5-.7 7.3-2.1z"></path>
                <path d="M154.3 100.7l-11.8-25.5h-12.2v25.5H97.9V2.5h47.5c13.3 0 23.7 3.1 30.9 9.2 7.3 6.1 10.9 14.8 10.9 26 0 7.1-1.3 13.3-4 18.5-2.7 5.3-6.5 9.5-11.6 12.5l19.3 31.9h-36.6zm-24-50.2h15c3.5 0 6.3-1 8.2-3.1 1.9-2.1 2.9-5 2.9-8.8 0-3.6-1-6.5-2.9-8.5s-4.6-3-8.2-3h-15v23.4z"></path>
                <path d="M231.1 71.4c2.8 3 6.2 4.5 10.1 4.5 3.8 0 7-1.5 9.5-4.4s3.8-6.8 3.8-11.6V2.5H287v57.4c0 8.6-1.9 16.1-5.7 22.6-3.8 6.5-9.1 11.5-16 15s-15 5.3-24.2 5.3-17.4-1.8-24.4-5.3-12.5-8.6-16.4-15c-3.9-6.5-5.8-14-5.8-22.6V2.5H227v57.4c-.1 4.7 1.3 8.5 4.1 11.5z"></path>
                <path d="M289.8 2.5h88.3v25.6h-28v72.5h-32.5V28.1h-27.9V2.5z"></path>
                <path d="M442.8 100.7l-4.9-13.9h-36.8l-5 13.9h-33.3l41.4-98.1h33.3l39.9 98.1h-34.6zm-33.3-37.1h20.4l-10.1-28.7-10.3 28.7z"></path>
                <path d="M479.5 2.5H512v71.1h40.9v27h-73.4V2.5z"></path>
                <path d="M557.8 2.5h32.5v98.1h-32.5V2.5z"></path>
                <path d="M656.5 28.4c-6.5-2.3-11.9-3.5-16-3.5-4 0-6 1.4-6 4.3 0 2.2 1.3 4 3.8 5.2 2.6 1.2 6.7 2.6 12.2 4.1 7 2 12.8 3.9 17.4 5.9 4.6 2 8.7 5.1 12.1 9.3 3.5 4.2 5.2 9.8 5.2 16.7 0 7.1-1.8 13-5.5 17.8-3.7 4.8-8.7 8.4-14.9 10.7-6.3 2.3-13.2 3.5-20.9 3.5-8.7 0-17.4-1.4-26.2-4.3-8.8-2.8-16.5-6.7-22.9-11.7l12-24.5c4.9 4.3 11.2 8 18.6 11 7.5 3 13.7 4.5 18.8 4.5 2.4 0 4.3-.4 5.7-1.3 1.4-.9 2.1-2.3 2.1-4.1 0-2.2-1.3-4-4-5.2-2.7-1.3-6.8-2.6-12.5-4-6.9-1.8-12.7-3.6-17.3-5.5-4.6-1.9-8.6-4.9-12-8.9-3.4-4-5-9.4-5-16.1 0-6.5 1.7-12.2 5.2-17.2 3.5-4.9 8.4-8.7 14.7-11.3 6.3-2.6 13.7-3.9 22.1-3.9 7.7 0 15.3 1.1 22.9 3.2 7.6 2.1 14.2 5 19.8 8.5l-11.8 24.8c-5.2-2.9-11.1-5.6-17.6-8z"></path>
                <path d="M690.2 2.5h34.4L749 53.8l24.2-51.2h34.4v98.1h-28.4V46.9l-19.7 44.2h-21.1l-19.7-44.2v53.8h-28.4V2.5z"></path>
            </symbol>
            <symbol id="icon-codepen" viewbox="0 0 250 250">
                <path d="M249.819 85.048c-.837-4.555-4.112-6.743-7.588-9.06l-11.993-7.996-40.056-26.704-41.197-27.465-13.42-8.946c-2.276-1.518-4.738-3.573-7.381-4.394-4.938-1.534-8.584.95-12.376 3.477l-12.239 8.159L63.308 38.96 22.287 66.308 9.098 75.101c-2.267 1.511-5.017 2.965-6.739 5.121-3.076 3.851-2.36 9.161-2.36 13.777v66.634c0 1.438-.074 2.901.184 4.321.559 3.08 2.379 5.545 4.927 7.289 2.534 1.734 5.112 3.408 7.667 5.111l35.967 23.978 43.194 28.796 26.079 17.386c1.302.868 2.592 1.679 4.133 2.103 3.304.909 6.538.08 9.325-1.766 2.755-1.825 5.5-3.667 8.25-5.5l36.562-24.374 43.027-28.685 25.152-16.768c1.48-.987 2.828-2.112 3.808-3.63 1.412-2.189 1.726-4.611 1.726-7.132V96.166c0-3.607.428-7.539-.181-11.118zM125 150.415l-33.271-22.254-4.724-3.159 33.35-22.308 3.075-2.057c.331-.222 1.09-.972 1.502-1.005.732-.058 2.419 1.528 3.034 1.94l19.504 13.045 15.527 10.385-33.273 22.254-4.724 3.159zm-10.742-69.488l-13.26 8.869-23.604 15.787-7.92 5.297c-.393.263-1.188 1.052-1.669 1.116-.278.037-.379-.09-.68-.291-6.241-4.162-12.47-8.341-18.705-12.511L36.992 91.55l-4.185-2.799c-.664-.444-1.927-.967-2.409-1.612-.062-.083-.222-.149-.311-.208l8.399-5.599 20.049-13.366 24.363-16.242 20.969-13.979 6.95-4.634 2.164-1.443c.202-.135.884-.771 1.133-.755l.143-.095v50.109zM48.36 125.002l-23.509 15.725-3.365 2.251v-35.954l23.509 15.726 3.365 2.251zm19.322 12.925l14.33 9.584 24.394 16.315 7.077 4.733c.221.148.662.339.774.569.21.432 0 1.5 0 1.967v44.881c0 .833.216 2.007 0 2.817-.03.113 0 .274 0 .393l-8.399-5.599-20.049-13.366-24.363-16.242-20.969-13.98-6.95-4.634-2.164-1.443c-.214-.143-1.038-.509-1.133-.756l-.143-.095 33.011-22.078 4.585-3.067zm68.058 31.15l13.26-8.869 23.604-15.787 7.92-5.297c.393-.263 1.188-1.052 1.669-1.116.278-.037.379.09.68.291 6.241 4.162 12.471 8.34 18.706 12.51l11.429 7.643 4.186 2.799c.664.444 1.927.967 2.41 1.611.062.083.222.149.311.208l-8.399 5.599-20.05 13.366-24.364 16.242-20.97 13.98-6.951 4.634-2.164 1.443c-.202.135-.884.771-1.133.755l-.143.095v-50.109zm65.898-44.075l23.512-15.726 3.366-2.251v35.954l-23.512-15.725-3.366-2.251zm-19.322-12.925l-14.33-9.584-24.394-16.315-7.077-4.733c-.221-.148-.662-.339-.774-.569-.21-.432 0-1.5 0-1.967V34.028c0-.833-.216-2.007 0-2.817.03-.113 0-.274 0-.393l8.399 5.599 20.05 13.366 24.364 16.242 20.97 13.979 6.951 4.634 2.164 1.443c.214.143 1.038.509 1.133.755l.143.095-33.014 22.08-4.586 3.067z"></path>
            </symbol>
            <symbol id="icon-dribbble" viewbox="0 0 16 16">
                <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 1.4c1.5 0 2.9.5 4 1.4-.8 1-1.9 1.9-3.3 2.5C8 4 7.3 2.8 6.4 1.6c.5-.1 1-.2 1.6-.2zm-3 .7c.9 1.2 1.7 2.4 2.4 3.6-1.6.5-3.6.7-5.8.7C2 4.5 3.3 3 5 2.1zM1.4 8v-.2c2.6 0 4.8-.3 6.6-.9.2.3.3.6.4 1-2.2.7-4 2.1-5.5 4.3C2 11.1 1.4 9.6 1.4 8zm2.5 5.2c1.3-2.1 3-3.4 5.1-4 .6 1.6 1.1 3.3 1.4 5-2.3.8-4.7.4-6.5-1zm7.8.3c-.3-1.6-.7-3.1-1.3-4.6 1.2-.2 2.6-.1 4.1.1-.3 1.9-1.3 3.5-2.8 4.5zM9.9 7.6c-.2-.4-.4-.8-.6-1.1 1.5-.7 2.8-1.6 3.7-2.7.9 1.1 1.5 2.4 1.5 3.9-1.6-.4-3.2-.4-4.6-.1z"></path>
            </symbol>
            <symbol id="icon-facebook" viewbox="0 0 9 16">
                <path d="M5.7 16V8.7h2.4l.4-2.8H5.7V4c0-.8.2-1.4 1.4-1.4h1.5V.1C8.4.1 7.5 0 6.5 0 4.3 0 2.8 1.3 2.8 3.8v2.1H.3v2.8h2.5V16h2.9z"></path>
            </symbol>
            <symbol id="icon-instagram" viewbox="0 0 16 16">
                <path d="M8 0H4.7c-.9 0-1.4.2-1.9.4s-1 .5-1.4.9c-.5.5-.8.9-1 1.5-.2.5-.3 1.1-.4 1.9v6.6c0 .9.2 1.4.4 1.9s.5 1 .9 1.4c.4.4.9.7 1.4.9.5.2 1.1.3 1.9.4h6.6c.9 0 1.4-.2 1.9-.4s1-.5 1.4-.9c.4-.4.7-.9.9-1.4.2-.5.3-1.1.4-1.9V8 4.7c0-.9-.2-1.4-.4-1.9s-.5-1-.9-1.4c-.4-.4-.9-.7-1.4-.9-.5-.2-1.1-.3-1.9-.4-.8-.1-1-.1-3.2-.1m0 1.4h3.2c.8 0 1.2.2 1.5.3.4.1.6.3.9.6.3.3.5.5.6.9.1.3.2.7.3 1.5v6.4c0 .8-.2 1.2-.3 1.5-.1.4-.3.6-.6.9-.3.3-.5.5-.9.6-.3.1-.7.2-1.5.3H4.8c-.8 0-1.2-.2-1.5-.3-.4-.1-.6-.3-.9-.6-.3-.3-.5-.5-.6-.9-.1-.3-.2-.7-.3-1.5V7.9 4.7c0-.8.2-1.2.3-1.5.1-.4.3-.6.6-.9.3-.3.5-.5.9-.6.3 0 .7-.2 1.5-.2.8-.1 1.1-.1 3.2-.1"></path>
                <path d="M8 10.7c-1.5 0-2.7-1.2-2.7-2.7 0-1.5 1.2-2.7 2.7-2.7 1.5 0 2.7 1.2 2.7 2.7 0 1.5-1.2 2.7-2.7 2.7m0-6.8C5.7 3.9 3.9 5.7 3.9 8s1.8 4.1 4.1 4.1 4.1-1.8 4.1-4.1S10.3 3.9 8 3.9"></path>
                <path d="M13.2 3.7c0 .5-.4 1-1 1-.5 0-1-.4-1-1 0-.5.4-1 1-1 .6.1 1 .5 1 1"></path>
            </symbol>
            <symbol id="icon-op-pr" viewbox="0 0 21 16">
                <path d="M13 0c-.9 0-1.7.1-2.5.4C9.7.1 8.9 0 8 0 3.6 0 0 3.6 0 8s3.6 8 8 8c.9 0 1.7-.1 2.5-.4.8.3 1.6.4 2.5.4 4.4 0 8-3.6 8-8s-3.6-8-8-8zm-2.5 13.4C8.4 12.5 7 10.4 7 8s1.4-4.5 3.5-5.4c2.1 1 3.5 3 3.5 5.4s-1.4 4.5-3.5 5.4zM2 8c0-3.2 2.5-5.8 5.7-6C6 3.5 5 5.6 5 8v5.2c-1.8-1.1-3-3-3-5.2zm5 5.9v-.6c.2.3.5.5.7.7-.2 0-.5-.1-.7-.1zm6.3.1C15 12.5 16 10.4 16 8s-1-4.5-2.7-6c3.2.2 5.7 2.8 5.7 6s-2.5 5.8-5.7 6z"></path>
            </symbol>
            <symbol id="icon-soulless" viewbox="0 0 728.4 102.9">
                <path d="M61.6 28.4c-6.5-2.3-11.9-3.5-16-3.5-4 0-6 1.4-6 4.3 0 2.2 1.3 4 3.8 5.2 2.6 1.2 6.7 2.6 12.2 4.1 7 2 12.8 3.9 17.4 5.9 4.6 2 8.7 5.1 12.1 9.3 3.5 4.2 5.2 9.8 5.2 16.7 0 7.1-1.8 13-5.5 17.9-3.6 4.8-8.5 8.3-14.8 10.7-6.3 2.3-13.2 3.5-20.9 3.5-8.7 0-17.4-1.4-26.2-4.3C14.1 95.4 6.4 91.5 0 86.5L12 62c4.9 4.3 11.2 8 18.6 11 7.5 3 13.7 4.6 18.8 4.6 2.4 0 4.3-.4 5.7-1.3 1.4-.9 2.1-2.3 2.1-4.1 0-2.2-1.3-4-4-5.2-2.7-1.3-6.8-2.6-12.5-4-6.9-1.8-12.7-3.6-17.3-5.5-4.6-1.9-8.6-4.9-12-8.9-3.4-4-5-9.4-5-16.1 0-6.5 1.7-12.2 5.2-17.2C15.1 10.4 20 6.6 26.3 4 32.7 1.3 40 0 48.4 0c7.7 0 15.3 1.1 22.9 3.2 7.6 2.1 14.2 5 19.8 8.5L79.4 36.5c-5.3-3-11.3-5.7-17.8-8.1z"></path>
                <path d="M172.1 7c8.2 4.4 14.6 10.5 19.2 18.2 4.6 7.7 6.9 16.5 6.9 26.2 0 9.8-2.3 18.6-6.9 26.5-4.6 7.8-11 14-19.2 18.4-8.2 4.4-17.5 6.7-27.7 6.7-10.3 0-19.5-2.2-27.7-6.7-8.2-4.4-14.6-10.6-19.2-18.4-4.6-7.8-6.9-16.7-6.9-26.5s2.3-18.6 6.9-26.3c4.6-7.7 11-13.8 19.2-18.1 8.2-4.3 17.5-6.5 27.7-6.5 10.2-.1 19.4 2.1 27.7 6.5zm-37.8 23.6c-3.2 2.1-5.8 5-7.7 8.6-1.9 3.6-2.9 7.7-2.9 12.3 0 4.6 1 8.7 2.9 12.4 1.9 3.7 4.5 6.6 7.7 8.8 3.2 2.1 6.7 3.2 10.4 3.2s7.1-1 10.2-3.1c3.1-2.1 5.5-5 7.3-8.8 1.8-3.7 2.7-7.9 2.7-12.5s-.9-8.7-2.7-12.4c-1.8-3.7-4.2-6.6-7.3-8.6-3.1-2.1-6.5-3.1-10.2-3.1-3.7 0-7.2 1.1-10.4 3.2z"></path>
                <path d="M239.1 71.4c2.8 3 6.2 4.5 10.1 4.5 3.8 0 7-1.5 9.5-4.4 2.5-2.9 3.8-6.8 3.8-11.5V2.5H295v57.4c0 8.6-1.9 16.1-5.7 22.6-3.8 6.5-9.1 11.5-16 15s-15 5.3-24.2 5.3-17.4-1.8-24.4-5.3-12.5-8.6-16.4-15c-3.9-6.5-5.8-14-5.8-22.6V2.5H235v57.4c-.1 4.7 1.3 8.5 4.1 11.5z"></path>
                <path d="M304.1 2.5h32.5v71.1h40.9v27h-73.4V2.5z"></path>
                <path d="M382.3 2.5h32.5v71.1h40.9v27h-73.4V2.5z"></path>
                <path d="M460.6 2.5h83v24.6h-50.5v12H539v24.6h-45.9V76h51.8v24.6h-84.3V2.5z"></path>
                <path d="M609.4 28.4c-6.5-2.3-11.9-3.5-16-3.5-4 0-6 1.4-6 4.3 0 2.2 1.3 4 3.8 5.2 2.6 1.2 6.7 2.6 12.2 4.1 7 2 12.8 3.9 17.4 5.9 4.6 2 8.7 5.1 12.1 9.3 3.5 4.2 5.2 9.8 5.2 16.7 0 7.1-1.8 13-5.5 17.9-3.7 4.8-8.7 8.4-14.9 10.7-6.3 2.3-13.2 3.5-20.9 3.5-8.7 0-17.4-1.4-26.2-4.3s-16.5-6.7-22.9-11.7l12-24.5c4.9 4.3 11.2 8 18.6 11 7.5 3 13.7 4.6 18.8 4.6 2.4 0 4.3-.4 5.7-1.3 1.4-.9 2.1-2.3 2.1-4.1 0-2.2-1.3-4-4-5.2-2.7-1.3-6.8-2.6-12.5-4-6.9-1.8-12.7-3.6-17.3-5.5-4.6-1.9-8.6-4.9-12-8.9-3.4-4-5-9.4-5-16.1 0-6.5 1.7-12.2 5.2-17.2 3.5-4.9 8.4-8.7 14.7-11.3 6.3-2.6 13.7-3.9 22.1-3.9 7.7 0 15.3 1.1 22.9 3.2 7.6 2.1 14.2 5 19.8 8.5L627 36.6c-5.1-3.1-11.1-5.8-17.6-8.2z"></path>
                <path d="M698.9 28.4c-6.5-2.3-11.9-3.5-16-3.5-4 0-6 1.4-6 4.3 0 2.2 1.3 4 3.8 5.2 2.6 1.2 6.7 2.6 12.2 4.1 7 2 12.8 3.9 17.4 5.9 4.6 2 8.7 5.1 12.1 9.3 3.5 4.2 5.2 9.8 5.2 16.7 0 7.1-1.8 13-5.5 17.9-3.7 4.8-8.7 8.4-14.9 10.7-6.3 2.3-13.2 3.5-20.9 3.5-8.7 0-17.4-1.4-26.2-4.3-8.8-2.8-16.4-6.7-22.9-11.7l12-24.5c4.9 4.3 11.2 8 18.6 11 7.5 3 13.7 4.6 18.8 4.6 2.4 0 4.3-.4 5.7-1.3 1.4-.9 2.1-2.3 2.1-4.1 0-2.2-1.3-4-4-5.2s-6.8-2.6-12.5-4c-6.9-1.8-12.7-3.6-17.3-5.5-4.6-1.9-8.6-4.9-12-8.9-3.4-4-5-9.4-5-16.1 0-6.5 1.7-12.2 5.2-17.2 3.5-4.9 8.4-8.7 14.7-11.3 6.3-2.6 13.7-3.9 22.1-3.9 7.7 0 15.3 1.1 22.9 3.2 7.6 2.1 14.2 5 19.8 8.5l-11.8 24.8c-5.2-3.1-11.1-5.8-17.6-8.2z"></path>
            </symbol>
            <symbol id="icon-tumblr" viewbox="0 0 9 16">
                <path d="M5.6 0H3.1C2.9 1.4 2.7 3.4 0 3.6v3.2h2.3v5.3c0 2 1.5 3.9 4.4 3.9 1.2 0 2.3-.1 2.3-.1v-3.4H6.8c-1.1 0-1.2-.5-1.2-1.2V6.9H9V3.4H5.6V0z"></path>
            </symbol>
            <symbol id="icon-twitter" viewbox="0 0 16 14">
                <path d="M5 13.5c6 0 9.3-5 9.3-9.3v-.4C15 3.3 15.6 2.7 16 2c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1C9.3.5 7.8 2 7.8 3.8c0 .3 0 .5.1.7-2.8-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.6 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4 0 1.6 1.1 2.9 2.6 3.2-.3.2-.6.2-.9.2-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H0c1.4 1 3.2 1.5 5 1.5"></path>
            </symbol>
        </svg>
    </div>
    <main class="content">
        <div class="slides js-slides">
            <div class="slide preload-slide active-slide" data-slide-num="0">
                <div class="slide__slice" data-slice-num="1">
                </div>
                <div class="slide__slice" data-slice-num="2">
                </div>
                <div class="slide__slice" data-slice-num="3">
                </div>
                <div class="slide__slice" data-slice-num="4">
                </div>
                <div class="slide__slice" data-slice-num="5">
                </div>
                <div class="slide__num js-slide-num">
                    <span>
                        <svg class="icon-0 ">
                            <use xlink:href="#icon-0"></use>
                        </svg>
                    </span>
                    <span>
                        <svg class="icon-0 ">
                            <use xlink:href="#icon-0"></use>
                        </svg>
                    </span>
                </div>
            </div>
            <div class="slide dark-slide" data-slide-num="1">
                <div class="slide__slice" data-slice-num="1">
                    <div class="slide__slice-img bg-slide-1"></div>
                </div>
                <div class="slide__slice" data-slice-num="2">
                    <div class="slide__slice-img bg-slide-1"></div>
                </div>
                <div class="slide__slice" data-slice-num="3">
                    <div class="slide__slice-img bg-slide-1"></div>
                </div>
                <div class="slide__slice" data-slice-num="4">
                    <div class="slide__slice-img bg-slide-1"></div>
                </div>
                <div class="slide__slice" data-slice-num="5">
                    <div class="slide__slice-img bg-slide-1"></div>
                </div>
                <div class="slide__num js-slide-num">
                    <span>
                        <svg class="icon-0 ">
                            <use xlink:href="#icon-0"></use>
                        </svg>
                    </span>
                    <span>
                        <svg class="icon-1 ">
                            <use xlink:href="#icon-1"></use>
                        </svg>
                    </span>
                </div>
            </div>
            <div class="slide" data-slide-num="2">
                <div class="slide__slice" data-slice-num="1">
                    <div class="slide__slice-img bg-slide-2"></div>
                </div>
                <div class="slide__slice" data-slice-num="2">
                    <div class="slide__slice-img bg-slide-2"></div>
                </div>
                <div class="slide__slice" data-slice-num="3">
                    <div class="slide__slice-img bg-slide-2"></div>
                </div>
                <div class="slide__slice" data-slice-num="4">
                    <div class="slide__slice-img bg-slide-2"></div>
                </div>
                <div class="slide__slice" data-slice-num="5">
                    <div class="slide__slice-img bg-slide-2"></div>
                </div>
                <div class="slide__num js-slide-num">
                    <span>
                        <svg class="icon-0 ">
                            <use xlink:href="#icon-0"></use>
                        </svg>
                    </span>
                    <span>
                        <svg class="icon-2 ">
                            <use xlink:href="#icon-2"></use>
                        </svg>
                    </span>
                </div>
            </div>
        </div>
        <div class="taglines js-taglines js-matrix-r">
            <div class="tagline js-matrix-r" data-tagline-num="1">
                <svg class="icon-soulless ">
                    <use xlink:href="#icon-soulless"></use>
                </svg>
                <div class="tagline__slice" data-tnum="1">
                    <div class="tagline__text">
                        <svg class="icon-soulless ">
                            <use xlink:href="#icon-soulless"></use>
                        </svg>
                    </div>
                </div>
                <div class="tagline__slice" data-tnum="2">
                    <div class="tagline__text">
                        <svg class="icon-soulless ">
                            <use xlink:href="#icon-soulless"></use>
                        </svg>
                    </div>
                </div>
                <div class="tagline__slice" data-tnum="3">
                    <div class="tagline__text">
                        <svg class="icon-soulless ">
                            <use xlink:href="#icon-soulless"></use>
                        </svg>
                    </div>
                </div>
                <div class="tagline__slice" data-tnum="4">
                    <div class="tagline__text">
                        <svg class="icon-soulless ">
                            <use xlink:href="#icon-soulless"></use>
                        </svg>
                    </div>
                </div>
                <div class="tagline__slice" data-tnum="5">
                    <div class="tagline__text">
                        <svg class="icon-soulless ">
                            <use xlink:href="#icon-soulless"></use>
                        </svg>
                    </div>
                </div>
                <div class="tagline__slice" data-tnum="6">
                    <div class="tagline__text">
                        <svg class="icon-soulless ">
                            <use xlink:href="#icon-soulless"></use>
                        </svg>
                    </div>
                </div>
                <div class="tagline__slice" data-tnum="7">
                    <div class="tagline__text">
                        <svg class="icon-soulless ">
                            <use xlink:href="#icon-soulless"></use>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="tagline js-matrix-r" data-tagline-num="2">
                <svg class="icon-brutalism ">
                    <use xlink:href="#icon-brutalism"></use>
                </svg>
                <div class="tagline__slice" data-tnum="1">
                    <div class="tagline__text">
                        <svg class="icon-brutalism ">
                            <use xlink:href="#icon-brutalism"></use>
                        </svg>
                    </div>
                </div>
                <div class="tagline__slice" data-tnum="2">
                    <div class="tagline__text">
                        <svg class="icon-brutalism ">
                            <use xlink:href="#icon-brutalism"></use>
                        </svg>
                    </div>
                </div>
                <div class="tagline__slice" data-tnum="3">
                    <div class="tagline__text">
                        <svg class="icon-brutalism ">
                            <use xlink:href="#icon-brutalism"></use>
                        </svg>
                    </div>
                </div>
                <div class="tagline__slice" data-tnum="4">
                    <div class="tagline__text">
                        <svg class="icon-brutalism ">
                            <use xlink:href="#icon-brutalism"></use>
                        </svg>
                    </div>
                </div>
                <div class="tagline__slice" data-tnum="5">
                    <div class="tagline__text">
                        <svg class="icon-brutalism ">
                            <use xlink:href="#icon-brutalism"></use>
                        </svg>
                    </div>
                </div>
                <div class="tagline__slice" data-tnum="6">
                    <div class="tagline__text">
                        <svg class="icon-brutalism ">
                            <use xlink:href="#icon-brutalism"></use>
                        </svg>
                    </div>
                </div>
                <div class="tagline__slice" data-tnum="7">
                    <div class="tagline__text">
                        <svg class="icon-brutalism ">
                            <use xlink:href="#icon-brutalism"></use>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
        <div class="preload js-preload">
            <div class="preload__pillar"></div>
            <div class="preload__pillar"></div>
            <div class="preload__pillar">
                <div class="preload__counter js-preload-counter c-black">0</div>
            </div>
            <div class="preload__pillar"></div>
            <div class="preload__pillar"></div>
            <div class="preload__counter js-preload-counter c-white">0</div>
        </div>
        <div class="dd js-dd">
            <div class="dd__hint js-dd-hint">
                <div class="dd__dots js-dd-dots">
                    <div class="dd__dot"></div>
                    <div class="dd__dot"></div>
                    <div class="dd__dot"></div>
                    <div class="dd__dot"></div>
                    <div class="dd__dot"></div>
                    <div class="dd__dot"></div>
                </div>
                <div class="dd__circle js-dd-cirlce"></div>
            </div>
            <div class="dd__text js-separate-text">drag up to explore</div>
        </div>
        <div class="info js-info">
            <div class="info__aside info__aside_lt js-aside-black">
                <div class="info__slot info__slot_sml js-black-mode">
                    <div class="info__text">01</div>
                </div>
                <div class="info__slot info__slot_bgg js-black-mode">
                    <div class="info__text">slider transition</div>
                </div>
            </div>
            <div class="info__aside info__aside_lt light-mode js-aside-white">
                <div class="info__slot info__slot_sml js-white-mode">
                    <div class="info__text">01</div>
                </div>
                <div class="info__slot info__slot_bgg js-white-mode">
                    <div class="info__text">slider transition</div>
                </div>
            </div>
            <div class="info__aside info__aside_rb js-aside-black js-contacts-btn">
                <div class="info__slot info__slot_sml js-black-mode">
                    <div class="info__show-btn"></div>
                </div>
                <div class="info__slot info__slot_bgg js-black-mode">
                    <div class="info__text">follow us</div>
                </div>
            </div>
            <div class="info__aside info__aside_rb light-mode js-aside-white js-contacts-btn">
                <div class="info__slot info__slot_sml js-white-mode">
                    <div class="info__show-btn"></div>
                </div>
                <div class="info__slot info__slot_bgg js-white-mode">
                    <div class="info__text">follow us</div>
                </div>
            </div>
            <div class="controls js-controls">
                <div class="controls__item-w js-ctrl-w-up">
                    <div class="controls__item controls__item_up ctrl-b js-black-mode"></div>
                    <div class="controls__item controls__item_up ctrl-w js-white-mode"></div>
                </div>
                <div class="controls__item-w js-ctrl-w-dn">
                    <div class="controls__item controls__item_dn ctrl-b js-black-mode"></div>
                    <div class="controls__item controls__item_dn ctrl-w js-white-mode"></div>
                </div>
            </div>
            <div class="popup js-popup js-black-mode">
                <div class="popup__slice"></div>
                <div class="popup__slice"></div>
                <div class="popup__slice"></div>
                <div class="popup__slice"></div>
                <div class="popup__slice"></div>
                <div class="info-cards js-info-cards">
                    <div class="i-card js-i-card">
                        <div class="i-card__title js-separate-text">interactive art director</div>
                        <div class="i-card__name js-separate-text">Sergey Churilov</div>

                    </div>
                    <div class="i-card js-i-card">
                        <div class="i-card__title js-separate-text">creative frontend developer</div>
                        <div class="i-card__name js-separate-text">Andrey Manoylov</div>

                    </div>
                </div>
            </div>
        </div>
        <div class="m-cursor-w js-cursor-wrap hide">
            <div class="m-cursor js-cursor">
                <div class="m-cursor__dot"></div>
            </div>
        </div>
        <div class="m-cursor-line js-cursor-line"></div>
    </main>
    <script>
        const globStates = {
            isCanChangeCurrSlider: false,
            isDev: 0,
            freeDragHeight: 200,
            slideSliceCount: 5,
            taglineSliceCount: 7,
            stSliceShift: (7 - 5) / 2, // slide vs tagline index shift
            mouseCursor: document.querySelector('.js-cursor'),
            controls: document.querySelector('.js-controls'),
            isDrag: false,
            isFirstSlide: true
        };
        let slides;
        const jsMatrix = document.querySelectorAll('.js-matrix-r');

        // drag down helper block
        const DD = new(function () {
            const sNode = document.querySelector('.js-dd');
            const hint = sNode.querySelector('.js-dd-hint');
            const textWrap = sNode.querySelectorAll('.js-separate-text');

            function animHint() {
                globStates.isCanChangeCurrSlider = true;
                const circle = sNode.querySelector('.js-dd-cirlce');
                const dotsWrap = sNode.querySelector('.js-dd-dots');
                const ddATL = new TimelineMax({
                    repeat: -1
                });
                const dotsWrapHeight = dotsWrap.offsetHeight;

                ddATL
                    .to(circle, 0.3, {
                        scale: .4,
                        ease: 'Power1.easeInOut'
                    }, 0.8)
                    .to(dotsWrap, 0.8, {
                        height: 1.,
                        ease: 'Power3.easeInOut'
                    }, '-=0.18')
                    .to(circle, 0.5, {
                        scale: 1.,
                        ease: 'Power1.easeInOut'
                    }, '+=.24')
                    .to(dotsWrap, 1.0, {
                        height: dotsWrapHeight,
                        ease: 'Power1.easeInOut'
                    }, '-=0.01');
            }

            function animateWords(words) {
                words.forEach(word => {
                    const spans = splitTextInSpans(word);
                    words.forEach((word) => {
                        word.style.opacity = 1;
                    });

                    spans.forEach((spanItem, idx, spans) => {
                        let tlWords = new TimelineMax();
                        const delay = (.2 + ((Math.abs(spans.length / 2 - idx - .5)) / 20)).toFixed(
                            2);

                        tlWords
                            .set(spanItem, {
                                y: spanItem.clientHeight,
                                opacity: 1
                            })
                            .to(spanItem, 0.5, {
                                y: 0,
                                ease: 'Expo.easeOut'
                            }, delay);
                    });
                });
            }

            function startAnimation() {
                hint.classList.add('active');
                setTimeout(() => {
                    animateWords(textWrap);
                }, 200);
                setTimeout(() => {
                    hint.classList.add('anim');
                    animHint(this.sNode);
                    slides.goToNextSlide(3, -1);
                }, 1000);
            }

            return {
                sNode,
                hint,
                textWrap,
                startAnimation
            };
        })();

        const contacts = new(function () {
            const btns = document.querySelectorAll('.js-contacts-btn .info__slot');
            const popup = document.querySelector('.js-popup');
            const slices = popup.querySelectorAll('.popup__slice');
            const animTL = new TimelineMax({
                reverse: true,
                paused: true
            });

            const iCards = document.querySelectorAll('.js-i-card');
            const cardLinks = document.querySelectorAll('.i-card__link');
            const linksATL = new TimelineMax({
                reverse: true,
                paused: true
            });
            const textsATL = new TimelineMax({
                reverse: true,
                paused: true
            });
            const spans = [];

            iCards.forEach((cardItem) => {
                const iCardTexts = cardItem.querySelectorAll('.js-separate-text');
                iCardTexts.forEach(item => {
                    spans.push(splitTextInSpans(item));
                });
            });

            animTL
                .staggerFromTo(slices, .7, {
                    x: '100%',
                    ease: 'Power1.easeInOut'
                }, {
                    x: '0%',
                    ease: 'Power1.easeInOut'
                }, .07, 0);
            spans.forEach((spanRow, idx) => {
                textsATL.staggerFromTo(spans[idx], 0.3, {
                    y: '100%',
                    ease: 'Expo.easeOut'
                }, {
                    y: '0%',
                    ease: 'Expo.easeOut'
                }, .03, '-=.7');
            });
            linksATL
                .staggerFromTo(cardLinks, .7, {
                    y: '100%',
                    ease: 'Power3.easeOut'
                }, {
                    y: '0%',
                    ease: 'Power3.easeOut'
                }, .1, 1.3);

            btns.forEach(function (btnItem) {
                btnItem.onclick = function () {
                    if (popup.classList.contains('open')) { //close
                        closePopup(btnItem);
                    } else {
                        popup.classList.add('open');
                        btnItem.parentNode.classList.add('btn-open');
                        linksATL.timeScale(1).restart();
                        animTL.restart();
                        mouseCursor.cursor.classList.remove('light-mode');
                        mouseCursor.cursor.classList.add('close', 'dark-mode');

                        setTimeout(() => {
                            textsATL.timeScale(1).restart();
                        }, 780);
                    }
                };
            });

            popup.addEventListener('mousemove', function (evt) {
                if (popup.classList.contains('open') && evt.target.classList.contains('js-popup')) {
                    mouseCursor.cursor.classList.add('close');
                } else {
                    mouseCursor.cursor.classList.remove('close');
                }
            });

            popup.addEventListener('click', function (e) {
                if (e.target.classList.contains('js-popup')) {
                    closePopup();
                }
            });

            function closePopup(btnItem) {
                popup.classList.remove('open');
                if (btnItem) {
                    if (btnItem.classList.contains('js-black-mode')) {
                        setTimeout(() => {
                            mouseCursor.cursor.classList.add('light-mode');
                        }, 400);
                    }
                    btnItem.parentNode.classList.remove('btn-open');
                } else {
                    document.querySelector('.btn-open').classList.remove('btn-open');
                }
                linksATL.timeScale(4).reverse();
                textsATL.timeScale(4).reverse();
                mouseCursor.cursor.classList.remove('close');

                setTimeout(() => {
                    animTL.reverse();
                }, 200);
            }

            return {
                closePopup
            };
        })();

        const constorls = new(function () {
            const popup = document.querySelector('.js-popup');
            const sNode = document.querySelector('.js-controls');
            const upBtn = sNode.querySelector('.js-ctrl-w-up');
            const dnBtn = sNode.querySelector('.js-ctrl-w-dn');
            const bCtrl = sNode.querySelectorAll('.js-black-mode');
            const wCtrl = sNode.querySelectorAll('.js-white-mode');
            const animBlackCtrlTL = createCtrlAnim(bCtrl, wCtrl);
            const animWhiteCtrlTL = createCtrlAnim(wCtrl, bCtrl);

            function createCtrlAnim(ctrls, nextWrap) {
                return new TimelineMax({
                        paused: true
                    })
                    .set(nextWrap, {
                        className: '-=active'
                    })
                    .set(ctrls, {
                        className: '+=active'
                    })
                    .fromTo(ctrls[0], .8, {
                        y: '100%',
                        ease: 'Power1.easeInOut'
                    }, {
                        y: '0%',
                        ease: 'Power1.easeInOut'
                    }, 0)
                    .fromTo(ctrls[1], .8, {
                        y: '-100%',
                        ease: 'Power1.easeInOut'
                    }, {
                        y: '0%',
                        ease: 'Power1.easeInOut'
                    }, 0);
            }

            upBtn.addEventListener('click', function () {
                if (!popup.classList.contains('open')) {
                    slides.goToNextSlide(3, -1);
                } else {
                    contacts.closePopup(dnBtn);
                }
            });

            dnBtn.addEventListener('click', function () {
                if (!popup.classList.contains('open')) {
                    slides.goToNextSlide(3, 1);
                } else {
                    contacts.closePopup(dnBtn);
                }
            });

            return {
                upBtn,
                dnBtn,
                animBlackCtrlTL,
                animWhiteCtrlTL
            };
        })();

        const mouseCursor = new(function () {
            const body = document.querySelector('body');
            const cursorWrap = document.querySelector('.js-cursor-wrap');
            const cursor = document.querySelector('.js-cursor');
            const cursorLine = document.querySelector('.js-cursor-line');
            const jsBlackBlocks = document.querySelectorAll('.js-black-mode');
            const jsWhiteBlocks = document.querySelectorAll('.js-white-mode');
            const closeBtns = document.querySelectorAll('.js-contacts-btn .info__slot');
            const popup = document.querySelector('.js-popup');

            const targetMousePos = {
                x: 0,
                y: 0
            };
            const currMousePos = {
                x: 0,
                y: 0
            };

            let cursorLineHeight = 0;
            let targetCursorLineHeight = 0;
            let cursorLineTop = 0;
            let targetCursorLineTop = 0;

            setTimeout(() => {
                cursorWrap.classList.remove('hide');
            }, globStates.isDev ? 2000 : 4000);

            jsBlackBlocks.forEach(function (itemBlock) {
                itemBlock.addEventListener('mouseenter', function () {
                    if (!itemBlock.parentNode.classList.contains('btn-open')) {
                        removeThenAddClasses(cursor, 'dark-mode', 'light-mode');
                    }
                });
                itemBlock.addEventListener('mouseleave', function () {
                    if (!itemBlock.parentNode.classList.contains('btn-open')) {
                        removeThenAddClasses(cursor, 'light-mode', 'dark-mode');
                    }
                });
            });
            jsWhiteBlocks.forEach(function (itemBlock) {
                itemBlock.addEventListener('mouseenter', function () {
                    removeThenAddClasses(cursor, 'light-mode', 'dark-mode');
                });
                itemBlock.addEventListener('mouseleave', function () {
                    removeThenAddClasses(cursor, 'dark-mode', 'light-mode');
                });
            });

            closeBtns.forEach(function (itemSlot) {
                itemSlot.addEventListener('mouseenter', function () {
                    if (popup.classList.contains('open')) {
                        cursor.classList.add('close');
                    }
                });
                itemSlot.addEventListener('mouseleave', function () {
                    if (popup.classList.contains('open')) {
                        cursor.classList.remove('close');
                    }
                });
            });

            body.addEventListener('mousemove', setMouseCursor);
            body.addEventListener('touchmove', setMouseCursor);

            body.addEventListener('mousedown', function (e) {
                cursorLine.style.left = targetMousePos.x + 'px';
                cursorLine.style.transform = 'translateY(' + currMousePos.y + 'px)';
                cursor.classList.add('active');
            });
            body.addEventListener('mouseup', function (e) {
                cursor.classList.remove('active');
            });

            function resetCursorLine(dir) {
                if (globStates.isDrag) {
                    const reset =
                        new TimelineMax({
                            onComplete: function () {
                                cursorLineHeight = targetCursorLineHeight = 0;
                                cursorLineTop = targetCursorLineTop = 0;
                                mouseCursor.cursorLine.style = '';
                            }
                        });

                    if (dir === -1) {
                        reset.to(mouseCursor.cursorLine, .26, {
                            height: 0
                        });
                    } else {
                        const hh = parseFloat(mouseCursor.cursorLine.style.height);
                        reset.to(mouseCursor.cursorLine, .26, {
                            height: 0,
                            y: parseFloat(mouseCursor.cursorLine.style.transform.slice(11)) + hh,
                            clearProps: 'y'
                        });
                    }
                }
            }

            function updCursorLineHeightAndTop(top) {
                if (globStates.isFirstSlide) {
                    top = top > 0 ? 0 : top;
                }
                targetCursorLineHeight = Math.abs(top);
                targetCursorLineTop = top;
            }

            function setMouseCursor(evt) {
                let rect = body.getBoundingClientRect();
                targetMousePos.x = evt.clientX - rect.left;
                targetMousePos.y = evt.clientY - rect.top;
            }

            function calcCursorPos() {
                currMousePos.x += (targetMousePos.x - currMousePos.x) * .16;
                currMousePos.y += (targetMousePos.y - currMousePos.y) * .16;
                cursorWrap.style.transform = 'translate(' + currMousePos.x + 'px, ' + currMousePos.y + 'px)';

                if (globStates.isDrag) {
                    cursorLineHeight += (targetCursorLineHeight - cursorLineHeight) * .16;
                    cursorLineTop += (targetCursorLineTop - cursorLineTop) * .16;

                    cursorLine.style.height = cursorLineHeight + 'px';
                    cursorLine.style.top = cursorLineTop + 'px';

                    if (cursorLineTop > 0) {
                        cursorLine.style.top = '';
                        cursorLine.style.bottom = cursorLineTop + 'px';
                    }
                }
                requestAnimationFrame(calcCursorPos);
            }
            requestAnimationFrame(calcCursorPos);

            return {
                cursor,
                cursorLine,
                resetCursorLine,
                updCursorLineHeightAndTop
            };
        })();

        const preload = {
            sNode: document.querySelector('.js-preload'),
            pillarsATL: null,
            animate: function () {
                const preloadCounter = {
                    count: 0
                };
                const pillars = this.sNode.querySelectorAll('.preload__pillar');
                this.pillarsATL = new TimelineMax({
                    reverse: true,
                    onComplete: DD.startAnimation
                });
                let countDisplay = this.sNode.querySelectorAll('.js-preload-counter');

                if (globStates.isDev) {
                    this.pillarsATL.timeScale(7);
                } else {
                    this.pillarsATL.timeScale(5);
                }

                this.pillarsATL
                    .to(preloadCounter, 3.4, {
                        count: 100,
                        roundProps: 'count',
                        ease: 'Power1.easeOut',
                        onUpdate: counterHandler
                    })
                    .to(pillars[0], 2.1, {
                        height: '60%',
                        ease: 'Power1.easeOut'
                    }, 1.35)
                    .to(pillars[1], 2.3, {
                        height: '72%',
                        ease: 'Power1.easeOut'
                    }, 0.85)
                    .to(pillars[2], 2.0, {
                        height: '100%',
                        ease: 'Power1.easeOut'
                    }, 0.1)
                    .to(pillars[3], 2.3, {
                        height: '84%',
                        ease: 'Power1.easeOut'
                    }, 0.55)
                    .to(pillars[4], 2.1, {
                        height: '70%',
                        ease: 'Power1.easeOut'
                    }, 1.15);

                function counterHandler() {
                    countDisplay.forEach(function (item) {
                        item.innerHTML = preloadCounter.count;
                    });
                }
            }
        };

        const infoScene = new(function () {
            const sNode = document.querySelector('.js-info');
            const blackAsides = sNode.querySelectorAll('.js-aside-black');
            const whiteAsides = sNode.querySelectorAll('.js-aside-white');
            const bSlots = sNode.querySelectorAll('.js-aside-black .info__slot');
            const wSlots = sNode.querySelectorAll('.js-aside-white .info__slot');
            const animBlackSlotsTL = createSlotAnim(bSlots, blackAsides, whiteAsides);
            const animWhiteSlotsTL = createSlotAnim(wSlots, whiteAsides, blackAsides);

            /**
             * @param fourSlots - 4 domEl
             * @param currSlotsWrap
             * @param nextSlotsWraps
             * @returns new TimelineMax
             */
            function createSlotAnim(fourSlots, currSlotsWrap, nextSlotsWrap) {
                return new TimelineMax({
                        paused: true
                    })
                    .set(nextSlotsWrap, {
                        className: '-=active'
                    })
                    .set(currSlotsWrap, {
                        className: '+=active'
                    })
                    .fromTo([fourSlots[1], fourSlots[3]], .8, {
                        x: '-100%',
                        ease: 'Power1.easeInOut'
                    }, {
                        x: '0%',
                        ease: 'Power1.easeInOut'
                    }, 0)
                    .fromTo([fourSlots[0], fourSlots[2]], .7, {
                        x: '-100%',
                        ease: 'Power1.easeInOut'
                    }, {
                        x: '0%',
                        ease: 'Power1.easeInOut'
                    }, '-=.7');
            }

            return {
                sNode,
                animBlackSlotsTL,
                animWhiteSlotsTL
            };
        })();

        slides = new(function () {
            const allTaglines = document.querySelectorAll('.js-taglines .tagline');
            const allSlides = document.querySelectorAll('.js-slides .slide');
            let currSlide = document.querySelector('.slide.active-slide');
            const slidersCount = allSlides.length;
            let isFirstSlide = true;
            let draggedTarget = null;
            let nextSlide, prevSlide;

            function initSlider() {
                const nextSlideIdx = ((+currSlide.dataset['slideNum'] + 1) % slidersCount) || 1;
                const prevSlideIdx = (+currSlide.dataset['slideNum'] - 1) <= 0 ? slidersCount - 1 : +currSlide.dataset[
                    'slideNum'] - 1;

                nextSlide = document.querySelector('[data-slide-num="' + nextSlideIdx + '"]');
                prevSlide = document.querySelector('[data-slide-num="' + prevSlideIdx + '"]');

                nextSlide.classList.add('next');
                prevSlide.classList.add('prev');

                allTaglines[nextSlideIdx - 1].classList.add('next');
                allTaglines[prevSlideIdx - 1].classList.add('prev');

                initDragableSlices();
            }

            function initDragableSlices() {
                allSlides.forEach(function (slideItem) {
                    const currSlices = slideItem.querySelectorAll('.slide__slice');

                    currSlices.forEach(function (sliceElem) {
                        sliceElem.dataset.top = 0;
                        initDragObj(sliceElem);
                    });
                });
            }

            function goToNextSlide(targetSliceNum, dir) {
                mouseCursor.resetCursorLine(dir, true);
                globStates.isDrag = false;
                document.onmouseup = document.ontouchcancel = null;
                document.onmousemove = document.ontouchmove = null;

                if (!globStates.isCanChangeCurrSlider) {
                    return;
                }
                dir = dir || -1;

                currSlide = document.querySelector('.slide.active-slide');
                nextSlide = document.querySelector('.slide.next');
                prevSlide = document.querySelector('.slide.prev');
                const currSlideDigits = currSlide.querySelectorAll('.js-slide-num span');
                const nextSlideDigits = nextSlide.querySelectorAll('.js-slide-num span');
                const currSlideSlices = currSlide.querySelectorAll('.slide__slice');
                const nextSlideSlices = nextSlide.querySelectorAll('.slide__slice');

                const currentSlideSlicesATL = new TimelineMax({
                    onComplete: onCompleteSlideChange
                });
                const startSliceNum = targetSliceNum - 2;
                const nextSlideIdx = +nextSlide.dataset['slideNum'];
                const prevSlideIdx = +prevSlide.dataset['slideNum'];
                const isNextSlideDark = nextSlide.classList.contains('dark-slide');

                const currTagline = isFirstSlide ? null : document.querySelector('[data-tagline-num="' +
                    currSlide.dataset['slideNum'] + '"]');
                const nextTagline = document.querySelector('[data-tagline-num="' + nextSlide.dataset['slideNum'] +
                    '"]');
                const currTaglineSlices = isFirstSlide ? null : currTagline.querySelectorAll('.tagline__slice');
                const nextTaglineSlices = nextTagline.querySelectorAll('.tagline__slice');

                globStates.isCanChangeCurrSlider = false;
                const currSortedSlideSlices = getSortedSlicesBySelectPos(currSlideSlices, startSliceNum);
                const nextSortedSlideSlices = getSortedSlicesBySelectPos(nextSlideSlices, startSliceNum);
                const currSortedTagline = isFirstSlide ? null : getSortedSlicesBySelectPos(currTaglineSlices,
                    startSliceNum);
                const nextSortedTagline = getSortedSlicesBySelectPos(nextTaglineSlices, Math.ceil(startSliceNum /
                    2));

                if (dir === 1) {
                    nextSlide.classList.add('top');
                }

                currentSlideSlicesATL
                    .staggerTo(currSortedTagline, .6, {
                        y: (dir * -100 + '%'),
                        rotation: 0.0,
                        ease: 'Power1.easeInOut'
                    }, .06, 0)
                    .staggerTo(currSortedSlideSlices, .7, {
                        y: (dir * +100 + '%'),
                        rotation: 0.0,
                        ease: 'Power1.easeInOut'
                    }, .08, 0)
                    .staggerTo(nextSortedSlideSlices, .7, {
                        y: '0%',
                        rotation: 0.0,
                        ease: 'Power1.easeInOut'
                    }, .08, 0)
                    .staggerTo(currSlideDigits, .8, {
                        y: (dir * -104 + '%'),
                        ease: 'Power1.easeInOut'
                    }, .1, 0)
                    .set(nextSlide, {
                        className: '-=top'
                    });

                if (isFirstSlide) {
                    const preloadCounters = document.querySelectorAll('.js-preload-counter');
                    for (let i = 0; i < preloadCounters.length; i++) {
                        preloadCounters[i].classList.add('fade-out');
                    }

                    preload.pillarsATL.timeScale(7).reverse();
                    DD.textWrap[0].childNodes[4].classList.add('hide');
                    DD.textWrap[0].childNodes[5].classList.add('hide');
                    DD.textWrap[0].childNodes[6].classList.add('hide');
                    infoScene.sNode.classList.add('open-info');

                    setTimeout(() => {
                        infoScene.animWhiteSlotsTL.restart();
                        constorls.animWhiteCtrlTL.restart();
                    }, 2000);
                }

                setTimeout(() => {
                    if (isNextSlideDark) {
                        removeThenAddClasses(
                            [DD.sNode, nextTagline, infoScene.sNode, globStates.mouseCursor,
                                globStates.controls, mouseCursor.cursorLine
                            ],
                            'dark-mode', 'light-mode'
                        );
                    } else {
                        removeThenAddClasses(
                            [DD.sNode, nextTagline, infoScene.sNode, globStates.mouseCursor,
                                globStates.controls, mouseCursor.cursorLine
                            ],
                            'light-mode', 'dark-mode'
                        );
                    }
                }, 240);

                function onCompleteSlideChange() {
                    const newActiveIdx = (nextSlideIdx + 1) % slidersCount || 1;
                    const newPrevIdx = (prevSlideIdx + (isFirstSlide ? 0 : 1)) % slidersCount || 1;
                    const onCompleteATL = new TimelineMax({
                        paused: true,
                        reverse: true
                    });

                    currSlide.classList.remove('active-slide', 'orig-scale');
                    nextSlide.classList.add('active-slide', 'orig-scale');
                    nextSlide.classList.remove('next');
                    prevSlide.classList.remove('prev');

                    onCompleteATL
                        .staggerFromTo(nextSortedTagline, .55, {
                            y: '100%',
                            ease: 'Power1.easeInOut'
                        }, {
                            y: '0%',
                            ease: 'Power1.easeInOut',
                            clearProps: 'y'
                        }, .05)
                        .staggerFromTo(nextSlideDigits, .8, {
                            y: '100%',
                            ease: 'Power1.easeInOut'
                        }, {
                            y: '0%',
                            ease: 'Power1.easeInOut',
                            clearProps: 'y'
                        }, .1, 0);

                    if (dir) {
                        onCompleteATL.restart();
                    } else {
                        onCompleteATL.reverse();
                    }

                    if (!isFirstSlide) {
                        if (isNextSlideDark) {
                            infoScene.animWhiteSlotsTL.restart();
                            constorls.animWhiteCtrlTL.restart();
                        } else {
                            infoScene.animBlackSlotsTL.restart();
                            constorls.animBlackCtrlTL.restart();
                        }
                    }

                    if (isFirstSlide) {
                        isFirstSlide = false;
                        globStates.isFirstSlide = false;
                    } else {
                        currTagline.classList.remove('active-slide');
                    }
                    nextTagline.classList.add('active-slide');
                    nextTagline.classList.remove('next');

                    allSlides[newActiveIdx].classList.add('next');
                    allSlides[newPrevIdx].classList.add('prev');
                    allTaglines[newActiveIdx - 1].classList.add('next');
                    allTaglines[newPrevIdx - 1].classList.add('prev');

                    currSortedSlideSlices.concat(nextSortedSlideSlices).forEach(function (sliceItem) {
                        sliceItem.dataset.top = 0;
                    });

                    new TimelineMax()
                        .to([currSortedSlideSlices, nextSortedSlideSlices], 0, {
                            clearProps: 'y'
                        });

                    setTimeout(() => {
                        globStates.isCanChangeCurrSlider = true;
                    }, 100);
                }
            }

            function initDragObj(elmnt) {
                let pos2 = 0,
                    pos3 = 0,
                    pos4 = 0,
                    topPos = 0;
                elmnt.onmousedown = elmnt.ontouchstart = dragElement;

                let nextSlide, nextSlideSlices, nextElem;
                let taglineSlice, taglineSlicePrev, taglineSliceNext, currSlideDigits;

                function dragElement(e) {
                    if (!globStates.isCanChangeCurrSlider) {
                        return;
                    }

                    const sliceNum = elmnt.dataset['sliceNum'] - 1;
                    currSlide = document.querySelector('.slide.active-slide');
                    const currSlideNum = currSlide.dataset['slideNum'];
                    currSlideDigits = currSlide.querySelectorAll('.js-slide-num span');

                    e = e || window.event;

                    const currTaglineSlices = document.querySelectorAll('[data-tagline-num="' + currSlideNum +
                        '"] .tagline__slice');
                    taglineSlice = currTaglineSlices[sliceNum + globStates.stSliceShift];
                    taglineSliceNext = currTaglineSlices[sliceNum + globStates.stSliceShift + 1];
                    taglineSlicePrev = currTaglineSlices[sliceNum + globStates.stSliceShift - 1];

                    elmnt.parentNode.classList.remove('orig-scale');
                    // get the mouse cursor position at startup:
                    pos3 = e.clientX;
                    pos4 = e.clientY;
                    document.onmouseup = document.ontouchcancel = stopDragElement;
                    document.onmousemove = document.ontouchmove = startDragElement;

                    draggedTarget = e.target;
                    if (!draggedTarget.classList.contains('slide__slice')) {
                        draggedTarget = draggedTarget.parentNode;
                    }

                    nextSlide = document.querySelector('.slide.next');
                    nextSlideSlices = nextSlide.querySelectorAll('.slide__slice');
                    nextElem = nextSlideSlices[sliceNum];
                }

                function startDragElement(e) {
                    globStates.isDrag = true;
                    e = e || window.event;
                    // calculate the new cursor position:
                    pos2 = pos4 - e.clientY;
                    pos4 = e.clientY;
                    topPos = +elmnt.dataset.top - pos2;
                    mouseCursor.updCursorLineHeightAndTop(topPos);

                    if (isFirstSlide) {
                        topPos = topPos > 0 ? 0 : topPos;
                    }

                    elmnt.style.transform = 'translateY(' + (topPos) + 'px)';

                    if (topPos < 0) {
                        nextElem.style.transform = 'translateY(' + (window.innerHeight + topPos) + 'px)';
                    } else {
                        if (!isFirstSlide) {
                            nextElem.style.transform = 'translateY(' + (-window.innerHeight + topPos) + 'px)';
                        }
                    }

                    elmnt.dataset.top = topPos;

                    if (taglineSlice) {
                        let taglineTop = map(topPos, 0, globStates.freeDragHeight, 0, 60);
                        let taglineTopNext = map(topPos, 0, globStates.freeDragHeight, 0, 30);
                        let taglineTopPrev = map(topPos, 0, globStates.freeDragHeight, 0, 15);
                        taglineSlice.style.transform = 'translateY(' + -taglineTop + '%)';
                        taglineSliceNext.style.transform = 'translateY(' + -taglineTopNext + '%)';
                        taglineSlicePrev.style.transform = 'translateY(' + -taglineTopPrev + '%)';

                        let slideDigitTop = map(topPos, 0, globStates.freeDragHeight, 0, 60);
                        let slideDigitTopNext = map(topPos, 0, globStates.freeDragHeight, 0, 30);
                        currSlideDigits[0].style.transform = 'translateY(' + -slideDigitTop + '%)';
                        currSlideDigits[1].style.transform = 'translateY(' + -slideDigitTopNext + '%)';
                    }

                    if (topPos > 0) {
                        nextSlide.classList.add('top');
                    } else {
                        nextSlide.classList.remove('top');
                    }

                    if (topPos < -globStates.freeDragHeight) {
                        goToNextSlide(draggedTarget.dataset['sliceNum'], -1);
                        pos2 = pos3 = topPos = 0;
                    } else if (topPos > globStates.freeDragHeight) {
                        pos2 = pos3 = topPos = 0;
                        goToNextSlide(draggedTarget.dataset['sliceNum'], 1);
                    }
                }

                function stopDragElement() {
                    mouseCursor.resetCursorLine(topPos > 0 ? 1 : -1, false);
                    globStates.isDrag = false;

                    if (topPos < -globStates.freeDragHeight) {
                        goToNextSlide(draggedTarget.dataset['sliceNum'], -1);
                    } else if (topPos > globStates.freeDragHeight) {
                        goToNextSlide(draggedTarget.dataset['sliceNum'], 1);
                    } else {
                        elmnt.parentNode.classList.add('orig-scale');
                        new TimelineMax({
                                onComplete: slideBackCallback
                            })
                            .to([elmnt, taglineSlicePrev, taglineSliceNext, taglineSlice, currSlideDigits], .3, {
                                y: 0,
                                clearProps: 'y'
                            })
                            .to(nextElem, 0.3, {
                                y: (topPos < 0 ? '100%' : '-100%'),
                                clearProps: 'y'
                            }, 0);

                        function slideBackCallback() {
                            elmnt.dataset.top = 0;
                        }
                    }
                    /* stop moving when mouse button is released:*/
                    document.onmouseup = document.ontouchcancel = null;
                    document.onmousemove = document.ontouchmove = null;
                }

                pos2 = pos3 = topPos = 0;
            }

            return {
                allSlides,
                slidersCount,
                allTaglines,
                goToNextSlide,
                initSlider
            };
        })(globStates);

        /////////////////////////////////////////////////////

        slides.initSlider();

        setTimeout(() => {
            matrixStyleRounding(jsMatrix);
            preload.animate();
        }, 200);

        function splitTextInSpans(elem) {
            const letters = elem.textContent.split('');
            elem.innerHTML = '';
            return letters.map(letter => {
                const span = document.createElement('span');
                span.textContent = letter;
                elem.appendChild(span);
                return span;
            });
        }

        /**
         * @param currSlideSlices - array of slices for sorting
         * @param startSliceIdx - select position for sorting
         * @returns {Array} - sorted slices
         */
        function getSortedSlicesBySelectPos(currSlideSlices, startSliceIdx) {
            const slicesCount = currSlideSlices.length;
            const sortedSlices = [];
            const posShift = (startSliceIdx - 1.5);
            let slicesNewOrder = [];

            // calc new positions for slide slices
            for (let i = slicesCount - 1; i >= 0; --i) {
                slicesNewOrder.push({
                    idx: i,
                    shift: Math.abs(slicesCount / 2 + posShift - i)
                });
            }

            slicesNewOrder
                .sort((a, b) => a.shift - b.shift)
                .forEach((item) => {
                    sortedSlices.push(currSlideSlices[item.idx]);
                });

            return sortedSlices;
        }

        window.addEventListener('resize', function () {
            matrixStyleRounding(jsMatrix);
        });

        // recalc matrix (округление значений к integer)
        function matrixStyleRounding(inObj) {
            if (inObj) {
                for (let i = 0; i < inObj.length; ++i) {
                    const tmpObj = inObj[i];
                    tmpObj.style.transform = '';
                    let matrix = getComputedStyle(tmpObj).transform;
                    matrix = matrix.slice(7, -1).split(' ').map(function (item) {
                        return parseInt(item);
                    });
                    tmpObj.style.transform = 'matrix(' + matrix.join(',') + ')';
                }
            }
        }

        function map(target, start1, stop1, start2, stop2) {
            return ((target - start1) / (stop1 - start1)) * (stop2 - start2) + start2;
        }

        function removeThenAddClasses(domEl, removeClass, addClass) {
            if (Array.isArray(domEl)) {
                domEl.forEach(function (itemEl) {
                    itemEl.classList.remove(removeClass);
                    itemEl.classList.add(addClass);
                });
            } else {
                domEl.classList.remove(removeClass);
                domEl.classList.add(addClass);
            }
        }
    </script>
</body>

</html>